import { Tabs, Badge } from "antd-mobile";
import React, { Component } from "react";
import "./discover.scss";
import styles from "./discover.module.scss";
import Lazy from "../../utils/imgLazyLoad";
import AutoResponsive from "autoresponsive-react";

class DiscoverPage extends Component {
  state = {
    nowIndex:167,
    tabs: [
      { title: <Badge style={{width:"50px"}}>关注</Badge> ,sub:0},
      { title: <Badge style={{width:"50px"}}>真香</Badge> ,sub:1},
      { title: <Badge style={{width:"50px"}}>短视频</Badge> ,sub:2},
    ],
    waterVideo:[],
    containerWidth:"100%",
    data:[
      {
        id:"1",
        pic:require("../../assets/images/view01.jpg"),
        text:"111"
      },
      {
        id:"2",
        pic:require("../../assets/images/view01.jpg"),
        text:"111"
      },
      {
        id:"3",
        pic:require("../../assets/images/view02.jpg"),
        text:"131"
      },
      {
        id:"4",
        pic:require("../../assets/images/view03.jpg"),
        text:"1g"
      },
      {
        id:"5",
        pic:require("../../assets/images/view04.jpg"),
        text:"1q1"
      },
      {
        id:"6",
        pic:require("../../assets/images/view04.jpg"),
        text:"1q1"
      },
      {
        id:"7",
        pic:require("../../assets/images/view04.jpg"),
        text:"1q1"
      },
      {
        id:"8",
        pic:require("../../assets/images/view04.jpg"),
        text:"1q1"
      },
      {
        id:"9",
        pic:require("../../assets/images/view04.jpg"),
        text:"1q1"
      },
      {
        id:"10",
        pic:require("../../assets/images/view04.jpg"),
        text:"1q1"
      },
    ],
    heights:[]
  };
  componentDidMount(){
     let arr = Array.from(document.querySelectorAll('.flawitem img'))
      setTimeout(()=>{
        let heights = arr.map(v=>{
          return v.offsetHeight
        })
        this.setState({
          heights
        })
      },300)
  }
  changeIndex = (i) => {
    if (i.sub === 0) {
      this.setState({
        nowIndex: 117,
      });
    } else if(i.sub===1){
      this.setState({
        nowIndex: 167,
      });
    }else{
      this.setState({
        nowIndex: 217,
      });
    }
  };
  getResponsiveProps(){
    return {
      itemMargin: 10,
      containerWidth: this.state.containerWidth || document.body.clientWidth,
      itemClassName: 'item',
      gridWidth: 10,
      transitionDuration: '.5',
    }
  }

  render() {
    return (
      <div style={{ height: "100%" }} className="discoverPage">
        <Tabs
          tabs={this.state.tabs}
          initialPage={1}
          tabBarUnderlineStyle={{ width: "50px",left:this.state.nowIndex}}
          onTabClick={this.changeIndex}
        >
          <div
            style={{
              display: "flex",
              alignItems: "center",
              justifyContent: "center",
              height: "100%",
              backgroundColor: "#fff",
            }}
          >
            关注
          </div>
          <div
            style={{
              display: "flex",
              // alignItems: "center",
              justifyContent: "center",
              height: "100%",
              backgroundColor: "#fff",
              padding:"0 10%",
              width:"100%"
            }}
          >
            <ul className={styles.videoLeft}>
              {this.state.waterVideo.map((item,i) => {
                return (
                  <li key={i} style={{width:"50%"}}>
                    <Lazy className="pic" src={item.path} alt="" style={{ width: "100%",height:item.height}} />
                    <p>{item.text}</p>
                  </li>
                );
              })}
            </ul>
            真香
          </div>
          <div className={styles.videoTab}>
          <AutoResponsive ref="container" {...this.getResponsiveProps()}>
            {
              this.state.data.map((v,i)=>{
                let style = {
                  width:"47%",
                  height:this.state.heights[i],
                  left:i%2===0? 10:'52%',
                  top:i%2===0?200*i/2:400*(i-1)/2
                }
                return <div key={v.id} style={style} className="flawitem" ref={dom => { this.pvcDesDom = dom}}>
                  {/* <img src={require("../../assets/images/view04.jpg")} className={styles.pic}></img> */}
                  <Lazy className={styles["pic"]} src={v.pic}></Lazy>
                </div>
              })
            }
          </AutoResponsive>
          </div>
        </Tabs>
      </div>
    );
  }
}
export default DiscoverPage;
